 <template>
  <div>
    <ux-grid ref="plxTable" :height="height" 
    :checkbox-config="{checkMethod: selectable, highlight: true,showHeader:true,checkAll: checkOption.checkAll || false,checkRowKeys:checkOption.checkRowKeys,checkStrictly:checkOption.checkStrictly,trigger:checkOption.trigger || 'default'}" 
    @selection-change="selectionChange" 
    @table-body-scroll="scroll"
    show-header-overflow="ellipsis">
      <ux-table-column type="checkbox" width="80" v-if="checkOption.checkRowKeys" fixed="left" />
      <ux-table-column type="index" width="100" />
      <ux-table-column v-for="item in columns" :key="item.id" :resizable="item.resizable" :field="item.prop" :title="item.label" :sortable="item.sortable" :width="item.width" :fixed="item.fixed" />
    </ux-grid>
  </div>
</template>

<script>
let checkOption = {
  checkAll: true,
  checkRowKeys: [],
  checkStrictly: false,
  trigger: 'row'
}
export default {
  data() {
    return {
      height: 0,
      columns: [],
      scrollTop: 0,
      radio: 1,
      checkOption: {
        checkAll: false,
        checkRowKeys: [],
        checkStrictly: false,
        trigger: 'row'
      }
    }
  },
  mounted() {
    this.height = 500 // 动态设置高度
    // 异步设置数据，这样解决初次进来不卡，由于加载数据很大啦，你没必要这样做哦
    setTimeout(() => {
      let col = ['name', 'sex', 'describe']
      this.columns = Array.from({ length: 500 }, (_, idx) => ({
        prop: idx > 2 ? col[2] : col[idx],
        id: idx,
        label: idx > 2 ? col[2] : col[idx],
        width: this.rnd(50, 300),
        sortable: idx === 1,
        resizable: true
      }))
      const data = Array.from({ length: 5000 }, (_, idx) => ({
        id: idx + 1,
        name: 'pl' + idx,
        sex: idx,
        describe: '欢迎使用plx' + idx
      }))
      this.datas = data // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
      this.$refs.plxTable.reloadData(this.datas)
    })

    // this.getList()
    this.title = this.readFile('../../styles/index.scss')
    console.log(this.title)
  },
  methods: {
    readFile(filePath) {
      // 创建一个新的xhr对象
      let xhr = null
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else {
        // eslint-disable-next-line
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
      }
      const okStatus = document.location.protocol === 'file' ? 0 : 200
      xhr.open('GET', filePath, false)
      xhr.overrideMimeType('text/html;charset=utf-8')
      xhr.send(null)
      return xhr.status === okStatus ? xhr.responseText : null
    },
    rnd(n, m) {
      var random = Math.floor(Math.random() * (m - n + 1) + n);
      return random;
    },
    setHei(val) {
      this.height = val
    },
    scroll({ scrollTop, scrollLeft }) {
      this.scrollTop = scrollTop
    },
    setData(num) {
      this.datas = Array.from({ length: num }, (_, idx) => ({
        id: idx + 1,
        name: 'pl' + idx,
        sex: idx,
        describe: '欢迎使用plx' + idx
      }))
      this.$refs.plxTable.reloadData(this.datas)
      // 默认是数据变化滚动到顶部，这里需要手动滚动之前位置
      if (this.radio === 2) {
        this.$refs.plxTable.pagingScrollTopLeft(this.scrollTop)
      }
    },
    selectable({ row }) {
      return row.id !== 2
    },
    toggleSelection(rows, type) {
      if (rows) {
        rows.forEach(row => {
          // 注意： 勾选方法与element不同哦
          // this.$refs.plxTable.toggleRowSelection(row); // element表格是这样写的
          // 我们得这样写

          // 如果是固定选中
          if (type === '固定选中') {
            // toggleRowSelection方法参数不懂得去看文档api哦
            this.$refs.plxTable.toggleRowSelection([{row: row,selected: true}])
            // 下面这是切换选中
          } else {
            this.$refs.plxTable.toggleRowSelection([{row: row}])
          }
        });
      } else {
        this.$refs.plxTable.clearSelection();
      }
    },
    pagingScrollTopLeft(val) {
      this.$refs.plxTable.pagingScrollTopLeft(val, val)
    },
    scrollBottom() {
      this.$refs.plxTable.scrollToRow(this.datas[this.datas.length - 1])
    },
    // 选中的行
    selectionChange(row) {
      console.log(row)
    }
  }
}
  </script>